<template>
  <div id="teml"> 
    <!--<div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
              <router-link v-bind="{to:'goods/getdesc/'+item.id}">
                  <img class="mui-media-object" :src="item.img_url">
                  <p>{{item.title}}</p>
                  <div class="mui-media-body">
                    <div id="dv">
                      <p><span v-text="item.sell_price"></span><del v-text="item.market_price"></del></p>
                      <p><span>热卖中</span> <span>剩余{{item.stock_quantity}}件</span></p>
                    </div>
                  </div>
              </router-link>
              </li>
		    </ul>    
		</div>-->
    <div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
		            <router-link v-bind="{to:'/goods/goodsinfo/' + item.id}">
                  <img class="mui-media-object" :src="item.img_url">
                  <p>{{item.title}}</p>
                  <div class="mui-media-body">
                    <p class="top"><span>¥{{item.sell_price}}</span><s>{{item.market_price}}</s></p>
                    <p class="bot"><span>热卖中</span><span>剩余{{item.stock_quantity}}件</span></p>
                  </div>
                </router-link>
            </li>
		    </ul>    
		</div>
  </div>
</template>

<script>
import common from '../../kits/common.js';
import Toast from 'mint-ui';
export default {
    data(){
       return{
         list:[]
       }
    },
    methods:{
        getData(){
        var url = common.newdomain + '/api/getgoods?pageindex=1';
        this.$http.get(url).then(function(res){
          if(res.body.status != 0){
            Toast(res.body.message);
            return;
          }
          this.list = res.body.message;
        })
      }
    },
    created(){
      this.getData();
    }
}
</script>

<style scoped>
.mui-table-view.mui-grid-view{
  padding:0;
}
.mui-content li,.mui-table-view.mui-grid-view .mui-table-view-cell {
  border:1px solid #ccc;
  padding:5px;
  box-shadow:0 0 4px #ccc;
  margin:0;
  text-align:left;
}
.mui-table-view.mui-grid-view .mui-table-view-cell > a:not(.mui-btn),.mui-table-view-cell > a:not(.mui-btn){
    margin:0;
}
.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
  height: 60px;
  background-color: #ccc;
  position:relative;
  line-height:20px;
}
.top span{
  font-size:20px;
  color:red;
  margin-right:10px;
}
.bot{
  position:absolute;
  bottom:0;
  width: 100%;
}
.bot{
  overflow:hidden;
  display:block;
}
.bot span:nth-of-type(2){
  float:right;
}
</style>